import React, { useState, useEffect } from "react";
import { Tooltip, Icon, Spin, Radio } from "antd";
import PageCoverContent from "./component/pageCoverContent/pageCoverItem";
import ContentSearchForm from "./component/contentSearchForm/ContentSearchForm";
import Paginator from "./component/Pagination/pagination";
import { getContentDetail } from "./helper/service";

const ContentManagementBox = () => {
  const descriptionArray = [
    { text: "功能使用说明", descriptionText: "32322" },
    { text: "内容安全说明", descriptionText: "" },
  ];
  const [loading, setLoading] = useState(false);
  const [searchParams, setSearchParams] = useState({});
  const [pageParams, setPageParams] = useState({ pageNo: 1, pageSize: 10 });
  const [mode, setMode] = useState("my");
  const [contentList, setContentList] = useState([]);
  const [total, setTotal] = useState("");

  const changeSearchParams = (params) => {
    console.log(params, 1222);
    setSearchParams({ ...searchParams, ...params });
    setPageParams({ pageNo: 1, pageSize: 10 });
  };

  const onChangePage = (params) => {
    setPageParams({ ...pageParams, ...params });
  };

  useEffect(() => {
    getContentDetail(pageParams, searchParams, mode)
      .then((res) => {
        const { data, page } = res;
        setTotal(page);
        setContentList(data);
      })
      .catch(() => {
        setContentList([]);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [searchParams, pageParams, mode]);

  const renderContent = () => {
    if (loading) {
      return (
        <div className="err-block">
          <Spin></Spin>
        </div>
      );
    }
    return (
      <>
        <PageCoverContent contentList={contentList}></PageCoverContent>
        {contentList.length !== 0 && (
          <Paginator
            onChangePage={onChangePage}
            pageParams={pageParams}
            page={total}
          ></Paginator>
        )}
      </>
    );
  };
  return (
    <div className="content-management-box">
      <div className="content-title">
        <div className="content-title-main">内容管理</div>{" "}
        <div className="content-title-description">
          {descriptionArray.map((item) => {
            return (
              <div className="title-description-item">
                {item.text}
                <Tooltip title={item.descriptionText}>
                  <Icon type="question-circle" style={{ marginLeft: 4 }} />
                </Tooltip>
              </div>
            );
          })}
        </div>
      </div>
      <ContentSearchForm
        onSearchChange={changeSearchParams}
      ></ContentSearchForm>
      <div className="content-filter-box">
        <div className="content-tab-box">
          <Radio.Group
            onChange={(e) => {
              setMode(e.target.value);
            }}
            value={mode}
            style={{ marginBottom: 8 }}
          >
            <Radio.Button value="my">我的</Radio.Button>
            <Radio.Button value="all">全部</Radio.Button>
          </Radio.Group>
        </div>
        <div className="content-time-box">
          发布日期{" "}
          <img
            className="content-time-icon"
            src="https://img.alicdn.com/imgextra/i3/O1CN01piT2eQ1RgcxcwD6jb_!!6000000002141-2-tps-200-200.png"
            alt=""
          />
        </div>
      </div>
      <div className="content-main-box">{renderContent()}</div>
    </div>
  );
};

export default ContentManagementBox;
